import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import BarcodeModal from '../../components/code/barcodeModal';

@connect(({ code }) => {
  return {
    payCode: code.getIn(['code', 'payCode']),
    barCode: code.getIn(['code', 'barCode']),
    qrCode: code.getIn(['code', 'qrCode']),
  };
})
class PayCode extends BaseComponent {
  state = {
    showModal: false,
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'code/updateActive',
      payload: true,
    });
    this.props.dispatch({
      type: 'code/initCodeRefuel',
    });
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'code/updateActive',
      payload: false,
    });
  }

  showFullScreen = () => {
    this.setState({
      showModal: true,
    });
  }

  render() {
    const { barCode, qrCode, payCode } = this.props;
    return (
      <div className="pay-code">
        <div className="wrapper">
          <div className="header">使用时，请出示此码完成支付</div>
          <div className="circle-row">
            <div className="circle left" />
            <div className="circle right" />
          </div>
          <div className="content">
            <img className="barcode" alt="" src={barCode} onClick={() => this.modal.show()} />
            <div className="show-num" onClick={() => this.modal.show()}>点击可查看数字号码</div>
            <img className="qrcode" alt="" src={qrCode} />
          </div>
        </div>

        <BarcodeModal ref={modal => this.modal = modal} code={payCode} barcode={barCode} />
      </div>
    );
  }
}

export default PayCode;

